<!--<div class="remind">
  <div class="owl">
    <img class="owl-img" src="media/owl.png"/>
    <a class="owl-button" id="remind-button"></a>
  </div>
  <div class="remind-top">
    <div class="remind-top-1"></div>
    <div class="remind-top-2"></div>
    <div class="remind-top-3"></div>
  </div>
  <div class="remind-bottom"></div>
</div>-->
<header>
  <!--<a href="https://webduino.io" target="_blank"><img class="logo" src="media/logo.png" id="logo"></a>-->
  <h1>{{title}}<a href="https://goo.gl/ndr9Mw" target="_blank"><i class="icon-cloud_done"></i><b>{{gotoCloud}}</b></a></h1>
  <div id="userMenu">

      <a href="https://webduino.io" target="_blank" id="blockly-to-tutorials"><i class="icon-home"></i> <b>{{userMenuWebSite}}</b></a>

      <a href="https://tutorials.webduino.io/zh-tw/docs/basic/index.html?utm_source=cloud-blockly&utm_medium=userMenu&utm_campaign=tutorials" target="_blank" id="blockly-to-website"><i class="icon-book"></i> <b>{{userMenuTutorials}}</b></a>

      <a href="https://docs.webduino.io/" target="_blank" id="blockly-to-website"><i class="icon-file-text2"></i> <b>{{userMenuApiDocs}}</b></a>

      <a href="index-tutorials{{#if_eq lang 'en'}}-en{{/if_eq}}.html" target="_blank" id="blockly-to-website"><i class="icon-tree" ></i> <b>{{userMenuDemos}}</b></a>

      <span><i class="icon-earth"></i> <select id="languageMenu"></select></span>

  </div>
</header>
<script>
function openDialog() {
  document.querySelector('.modalDialog').classList.add('show');
}

function closeDialog() {
  document.querySelector('.modalDialog').classList.remove('show');
}
</script>
<div id="openModal" class="modalDialog">
  <div>
    <a href="#" onclick="closeDialog();return false;" title="Close" class="close">X</a>
  </div>
</div>
<div id="blockFilter">
  <a class="filterBtn selected">All</a>
  <!-- <a class="filterBtn" tag="smart">S</a> -->
</div>
<table class="nav" id="mainTable" height="100%">
  <tr>
    <td colspan=2>
      <table width="100%">
        <tr id="tabRow" height="1em">
          <td id="tab_blocks" class="tabon">{{blocks}}</td>
          <td class="tabmin">&nbsp;</td>
          <td id="tab_javascript" class="taboff">JavaScript</td>
          <td id="copyCode" style="display:none;" data-clipboard-target="#content_javascript" data-tooltip="Copy to clipboard" class="toolMenu"><i class="icon-copy"></i></td>
          <td class="tabmin">&nbsp;</td>
          <td class="tabmax">
            <a href="#" onclick="openDialog();return false;" id="qrButton" class="linkButton toolMenu"><i class="icon-qrcode"></i><div>{{qrcodeTooltip}}</div></a>
            <a href="launcher.html" target="_blank" id="linkToBin" class="linkButton toolMenu"><i class="icon-embed2"></i> <div>{{openJsbin}}</div></a>
            <div id="check-device-online" class="toolMenu">
              <input id="input-device" class="">
              <span id="check-btn" class="check-btn">
                <i class="icon-power" id="check-icon"></i> 
              </span> <div>{{checkDeviceOnline}}</div>
            </div>
            <button id="sampleButton" class="notext toolMenu" >
              <i class="icon-box-add"></i> <div>{{sampleTooltip}}</div>
            </button>
            <button id="demoButton" class="notext toolMenu">
              <i class="icon-lab"></i> <div>{{demoTooltip}}</div>
            </button>
            <button id="trashButton" class="notext toolMenu">
              <i class="icon-bin"></i>  <div>{{trashTooltip}}</div>
            </button>
            <button id="linkButton" class="notext toolMenu">
              <i class="icon-link"></i>  <div>{{linkTooltip}}</div>
            </button>
            <button id="runButton" class="notext primary toolMenu">
              <i class="icon-play3"></i>  <div>{{runTooltip}}</div>
            </button>
          </td>
        </tr>
      </table>
    </td>
  </tr>
  <tr>
    <td height="99%" colspan=2 id="content_area">
    </td>
  </tr>
</table>

<div id="content_blocks" class="content"></div>
<pre id="content_javascript" class="content"></pre>
<div id="smaple-menu" tabindex="0">
  <div id="smaple-menu-content">
    <h3>{{samples1}}</h3>
    <div data-value="1.1">{{samples1_1}}<i class="icon-plus"></i></div>
    <div data-value="1.2">{{samples1_2}}<i class="icon-plus"></i></div>
    <div data-value="1.3">{{samples1_3}}<i class="icon-plus"></i></div>
    <div data-value="1.4">{{samples1_4}}<i class="icon-plus"></i></div>
    <div data-value="1.5">{{samples1_5}}<i class="icon-plus"></i></div>
    <h3>{{samples2}}</h3>
    <div data-value="2.1">{{samples2_1}}<i class="icon-plus"></i></div>
    <div data-value="2.2">{{samples2_2}}<i class="icon-plus"></i></div>
    <div data-value="2.3">{{samples2_3}}<i class="icon-plus"></i></div>
    <div data-value="2.4">{{samples2_4}}<i class="icon-plus"></i></div>
    <div data-value="2.5">{{samples2_5}}<i class="icon-plus"></i></div>
    <div data-value="2.6">{{samples2_6}}<i class="icon-plus"></i></div>
    <div data-value="2.7">{{samples2_7}}<i class="icon-plus"></i></div>
    <div data-value="2.8">{{samples2_8}}<i class="icon-plus"></i></div>
    <h3>{{samples3}}</h3>
    <div data-value="3.1">{{samples3_1}}<i class="icon-plus"></i></div>
    <div data-value="3.2">{{samples3_2}}<i class="icon-plus"></i></div>
    <h3>{{samples4}}</h3>
    <div data-value="4.1">{{samples4_1}}<i class="icon-plus"></i></div>
    <div data-value="4.2">{{samples4_2}}<i class="icon-plus"></i></div>
    <div data-value="4.3">{{samples4_3}}<i class="icon-plus"></i></div>
    <h3>{{samples5}}</h3>
    <div data-value="5.1">{{samples5_1}}<i class="icon-plus"></i></div>
    <div data-value="5.2">{{samples5_2}}<i class="icon-plus"></i></div>
    <div data-value="5.3">{{samples5_3}}<i class="icon-plus"></i></div>
    <div data-value="5.4">{{samples5_4}}<i class="icon-plus"></i></div>
    <div data-value="5.5">{{samples5_5}}<i class="icon-plus"></i></div>
    <div data-value="5.6">{{samples5_6}}<i class="icon-plus"></i></div>
    <div data-value="5.7">{{samples5_7}}<i class="icon-plus"></i></div>
    <div data-value="5.8">{{samples5_8}}<i class="icon-plus"></i></div>
    <div data-value="5.9">{{samples5_9}}<i class="icon-plus"></i></div>
    <div data-value="5.10">{{samples5_10}}<i class="icon-plus"></i></div>
    <h3>{{samples6}}</h3>
    <div data-value="6.1">{{samples6_1}}<i class="icon-plus"></i></div>
    <div data-value="6.2">{{samples6_2}}<i class="icon-plus"></i></div>
  </div>
</div>
<div id="demo-area">
  <div id="demo-resize-bar"></div>
  <div class="demo-area-content">
    <div class="close-btn"></div>
    <h4>{{demoAreaTitle}}</h4>
    <span>{{demoAreaChoose}}</span>
    <select id="demo-select">
      <option value="demo-area-01">{{demoAreaSelect1}}</option>
      <option value="demo-area-02">{{demoAreaSelect2}}</option>
      <option value="demo-area-03">{{demoAreaSelect3}}</option>
      <option value="demo-area-04">{{demoAreaSelect4}}</option>
      <option value="demo-area-05">{{demoAreaSelect5}}</option>
      <option value="demo-area-06">{{demoAreaSelect6}}</option>
      <option value="demo-area-07">{{demoAreaSelect7}}</option>
      <option value="demo-area-08">{{demoAreaSelect8}}</option>
      <option value="demo-area-09">{{demoAreaSelect9}}</option>
    </select>
  </div>
</div>
<textarea id="content_xml" class="content" wrap="off"></textarea>
